<template>
  <div class="transfer-v2">
    <div class="leftTable">
      <div style="padding: 10px; height: 34px; padding-top: 0">
        <span v-if="cp"> 从</span> {{ cp }}
      </div>
      <!-- 度尺图 -->
      <a-row
        v-if="showSize && sizeLineFilesLeft?.length"
        align="middle"
        type="flex"
      >
        <a-checkbox
          :disabled="sizeLineFilesRight?.length > 0"
          style="margin-right: 10px"
          v-model:checked="sizeLineFileChecked"
        ></a-checkbox>
        <oss-upload
          small
          v-model:files="sizeLineFilesLeft"
          :disabled="true"
          list-type="picture-card"
        >
        </oss-upload>
      </a-row>
      <a-table
        size="small"
        row-key="id"
        :row-selection="rowSizeSelection"
        :pagination="false"
        :scroll="{ x: '100%', y: 400 }"
        :columns="sizeLeftColumns"
        :data-source="sizeLeftTableData"
      >
        <template
          v-for="item in sizeCodeList"
          :key="'left' + item"
          v-slot:[item]
        >
          <a-checkbox
            :value="item"
            :checked="checkSizeCodes.includes(item)"
            @change="checkSizeChange"
          >
            {{ item }}
          </a-checkbox>
        </template>
        <template #skeImg="{ record }">
          <oss-upload
            v-model:files="record.ossList"
            small
            disabled
            accept=".png,.jpg,.jpeg,.gif"
            list-type="picture-card"
          />
        </template>
      </a-table>
    </div>
    <div class="operation">
      <a-button type="primary" :disabled="disMoveRightBtn" @click="moveIn">
        移入
        <DoubleRightOutlined />
      </a-button>
      <a-button
        style="margin-top: 20px"
        type="primary"
        :disabled="disMoveLeftBtn"
        @click="moveOut"
      >
        移出
        <DoubleLeftOutlined />
      </a-button>
      <!-- <a-button
        type="primary"
        style="margin-top:20px"
        :disabled="sizeSelectedRowKeys.length < 1"
        @click="moveOut">
        移出
        <a-icon type="delete" />
      </a-button> -->
    </div>
    <div class="rightTable">
      <div
        style="
          padding: 10px;
          line-height: 24px;
          text-align: right;
          padding-top: 0;
        "
      >
        复制到 {{ currentCp }}
      </div>
      <a-row
        v-if="showSize && sizeLineFilesRight.length"
        align="middle"
        type="flex"
      >
        <a-checkbox
          style="margin-right: 10px"
          v-model:checked="sizeLineFileRightChecked"
        ></a-checkbox>
        <oss-upload
          small
          v-model:files="sizeLineFilesRight"
          :disabled="true"
          list-type="picture-card"
        >
        </oss-upload>
      </a-row>
      <a-table
        size="small"
        row-key="id"
        :row-selection="rowSizeSelectionRight"
        :pagination="false"
        :scroll="{ x: '100%', y: 400 }"
        :columns="sizeRightColumns"
        :data-source="sizeRightTableData"
      >
        <template #skeImg="{ record }">
          <oss-upload
            v-model:files="record.ossList"
            small
            disabled
            accept=".png,.jpg,.jpeg,.gif"
            list-type="picture-card"
          />
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
import { inject, toRefs } from 'vue'
import { DoubleRightOutlined, DoubleLeftOutlined } from '@ant-design/icons-vue'
import { useCopy, useState } from './index.js'
export default {
  props: {
    cp: {
      default: null
    },
    skc: {
      default: null
    },
    sizeColumns: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    },
    sizeCodeList: {
      type: Array,
      default: () => []
    },
    showSize: {
      type: Boolean,
      default: false
    },
    sizeLineFiles: {
      type: Array,
      default: () => []
    }
  },
  setup(props) {
    const state = useState({
      currentCp: inject('cp')
    })
    const modules = useCopy(props, state)
    return {
      ...toRefs(state),
      ...modules,
      DoubleRightOutlined,
      DoubleLeftOutlined
    }
  }
}
</script>

<style lang="scss" scoped>
.transfer-v2 {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  height: 500px;
  margin-top: 20px;
}
.leftTable,
.rightTable {
  width: 45%;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 10px;
}
.operation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
